<template>
	<view>
		<view class="userinfo">
			<image class="imgs" :src="userInfo.avatar" mode="aspectFill"></image>
			<view class="info">
				<view class="uname">{{userInfo.nick}}</view>
				<view class="uphone">账号：{{userInfo.userID}}</view>
			</view>
		</view>
		<view class="content">
			<view class="item" @click="handleScansode">
				<view class="" style="display: flex; align-items: center">
					<image src="/static/icon/icon7.png" mode=""></image>
					<view class="texts">扫一扫</view>
				</view>
				<uni-icons type="forward" size="20" color="#707070"></uni-icons>
			</view>
			<view class="item" @click="$pageGo('/pages/my/addfriends')">
				<view class="" style="display: flex; align-items: center">
					<image src="/static/icon/icon8.png" mode=""></image>
					<view class="texts">加好友</view>
				</view>
				<uni-icons type="forward" size="20" color="#707070"></uni-icons>
			</view>
		</view>
		<view class="btns" @click="outlogin">退出登录</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {}
		};
	},
	onLoad() {
		let that = this
		uni.$TUIKit.getMyProfile().then(function (imResponse) {
			that.userInfo = imResponse.data;
			console.log(that.userInfo);
		});
	},
	methods: {
		outlogin() {
			uni.reLaunch({
				url: '/pages/loging/loging'
			});
		},
		handleScansode() {
			// 允许从相机和相册扫码
			uni.scanCode({
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.userinfo {
	width: 100%;
	padding: 0rpx 30rpx 60rpx;
	box-sizing: border-box;
	display: flex;
	background-color: #fff;
	align-items: center;
	.imgs {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
	}
	.info {
		margin-left: 30rpx;
		.uname {
			font-size: 40rpx;
			font-weight: bold;
			color: #000;
			margin-bottom: 10rpx;
		}
		.uphone {
			font-size: 28rpx;
			color: #666;
			line-height: 38rpx;
		}
	}
}
.content {
	border-top: 10rpx solid #eee;
	border-bottom: 10rpx solid #eee;
	background-color: #fff;
	.item {
		height: 100rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.texts {
			font-size: 32rpx;
			color: #707070;
			margin-left: 10rpx;
		}
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
}
.btns {
	width: 100%;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color: #707070;
	border-radius: 10rpx;
	background-color: #fff;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
